<template>
   <div class="todolist-container">
    <el-tabs>
    <el-tab-pane label="待办事项">
      <TodoListComponent/>
</el-tab-pane>
<el-tab-pane label="奖惩措施">
  <RewardsAndPunishmentsComponent/>
</el-tab-pane>
  </el-tabs>
</div>


</template>

<script setup>
import TodoListComponent from './components/TodoList.vue';
import RewardsAndPunishmentsComponent from './components/RewardsAndPunishments.vue';


</script>

<style scoped>

  .todolist-container {
    display: flex;
   /* Use flexbox for layout */
width: 95vw;
    align-items: flex-start;
    /* Align items at the start */
    /* flex-direction: column; */
    /* Stack items vertically */ 
    /* width: 99%; */
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: #f9f9f9;

    & > .el-tabs {
      margin-top: 20px;
      width: 100%;
      }
  }
.date-picker-container {
  margin-bottom: 20px;
  margin-top: 20px;
}


.status-upcoming {
  color: gray; /* 未开始 */
}

.status-ongoing {
  color: green; /* 正在进行 */
}

.status-completed {
  color: blue; /* 已完成 */
}

.status-failed {
  color: red; /* 失败 */
}
.button-group {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 均分一行 */
    margin-top: 10px; /* 按钮与其他内容的间距 */

    & > button {
      width: 100px; /* 按钮宽度 */
      margin-left: 10px; /* 按钮间距 */ 
    }
  }
  
</style>